CoreComponents 源由

從 Phoenix 1.7 以後，Phoenix 的新專案都會產生這個 Component module，並且預設 import 到所有有機會使用到 heex template 的地方。

Corecomponents 為我們提供了許多常用的 component，像是 button、input、form 等等，我們可以直接使用這些 component 來快速建立畫面。

拿 input 為例，舊版的 Phoenix 專案中，提供了像是 text_input(form, :name) 這樣的 helper function，可以幫我們快速建立 input 標籤：

text_input(form, :name)
#=> <input id="user_name" name="user[name]" type="text" value="">

但儘管我們可以藉由傳入 option 替他加上 class

text_input(form, :name, class: "border border-gray-300")

但是這代表如果網站有統一的輸入欄位風格的話，我們必須在每個 input 都加上這個 class ，這樣就沒有辦法達成目前以 component 統一管理可以統一修改樣式的設計。

使用新的方式，則是把 label 與錯誤回饋都整理進去 <.input> component 裡面讓實際使用時可以更簡潔：

<.input field={@form[:title]} type="text" label="Title" />

因此在 Phoenix 1.7 之後，大部分有需要依照專案修改樣式的 html helper function 都改由 CoreComponent 以 component 的形式提供，我們可以依照專案的設計需求直接去改寫這些 component。

建議直接使用新的 component 形式即可，如果遇到舊的專案需要理解現有的 html helper 再直接查該函式的文件即可。

目前用到的 CoreComponent

在上一篇的 NoteLive.index 的 render 裡：

def render(assigns) do
  ~H"""
  <.header>感激筆記 LiveView 版</.header>
  <.table id="notes" rows={@notes}>
    <:col :let={note} label="ID"><%= note.id %></:col>
    <:col :let={note} label="內容"><%= note.content %></:col>
  </.table>
  """
end

使用了 <.header>、<.table> 這兩個 component。

header component

除了簡單的提供標題功能以外

<.header>感激筆記 LiveView 版</.header>

也有可以使用 subtitle slot 來提供副標題

<.header>
  感激筆記 LiveView 版
  <:subtitle>這是副標題</:subtitle>
</.header>

也可以在標題右邊加上按鈕

<.header>
  感激筆記 LiveView 版
  <:subtitle>這是副標題</:subtitle>
  <:actions>
    <.link patch={~p"/new"}>新增筆記</.link>
  </:actions>
</.header>

預設有提供一個基本的樣式，如果需要修改或是需要更多功能，可以直接在 CoreComponent 擴充。

table component

如果不使用 <.table> component 的話會寫：

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>username</th>
    </tr>
  </thead>
  <tbody>
    <%= for user <- @users do %>
      <tr>
        <td><%= user.id %></td>
        <td><%= user.username %></td>
      </tr>
    <% end %>
  </tbody>
</table>

table component 幫我們把 thead 的部分拿到 :col slot 的 label 標籤，讓 template 簡潔了一些。

<.table id="users" rows={@users}>
  <:col :let={user} label="id"><%= user.id %></:col>
  <:col :let={user} label="username"><%= user.username %></:col>
</.table>